<template>
  <Modal :on-cancel="cancel" v-model="show" width='80' title="数据批量导入">
    <Row>
      <Col span="18" offset="3">
        <Steps :current="step_current">
          <Step title="上传数据模板">
            <span slot="icon">01</span>
          </Step>
          <Step title="数据验证">
            <span slot="icon">02</span>
          </Step>
          <Step title="上传成功">
            <span slot="icon">03</span>
          </Step>
        </Steps>
      </Col>
    </Row>
    <div class="body">
      <One ref="one" v-show='step_current === 0' @upload-success='uploadSuccess'></One>
      <Two
        ref="step-two"
        :validatorSuccessNum="validatorSuccessNum"
        :validatorErrorNum="validatorErrorNum"
        :validatorErrorStudent="validatorErrorStudent"
        :validatorErrorTeacher="validatorErrorTeacher"
        :validatorErrorGroup="validatorErrorGroup"
        :validatorErrorClassRoom="validatorErrorClassRoom"
        :validatorErrorStudentGroup="validatorErrorStudentGroup"
        v-show='step_current === 1'
        @start-import-data="startImport"
        @previous='init'>
      </Two>
      <Three
        :importErrorNum="importErrorNum"
        :importExistNum="importExistNum"
        :importSuccessNum="importSuccessNum"
        :importErrorStudent="importErrorStudent"
        :importErrorTeacher="importErrorTeacher"
        :importErrorGroup="importErrorGroup"
        :importErrorClassRoom="importErrorClassRoom"
        :importErrorStudentGroup="importErrorStudentGroup"
        @finish="onSuccess"
        ref="step-three"
        v-show='step_current === 2'
      ></Three>
    </div>
    <span slot="footer"></span>
  </Modal>
</template>
<script>
import One from './import-data/one'
import Two from './import-data/two'
import Three from './import-data/three'
import { mapGetters } from 'vuex'
import { createImportJob, startImportJob } from '@/graphql/mutation/import-job/index'
export default {
  name: 'import-data-modal',
  components: {
    One,
    Two,
    Three
  },
  data () {
    return {
      step_current: 0,
      show: false,
      validatorErrorNum: 0,
      validatorSuccessNum: 0,
      importErrorNum: 0,
      importExistNum: 0,
      importSuccessNum: 0,
      validatorErrorStudent: 0,
      validatorErrorTeacher: 0,
      validatorErrorGroup: 0,
      validatorErrorClassRoom: 0,
      validatorErrorStudentGroup: 0,
      importErrorStudent: 0,
      importErrorTeacher: 0,
      importErrorGroup: 0,
      importErrorClassRoom: 0,
      importErrorStudentGroup: 0,
      job_id: ''
    }
  },
  computed: {
    ...mapGetters([
      'school'
    ])
  },
  methods: {
    onSuccess () {
      this.close()
      this.init()
      this.$emit('finish')
    },
    cancel () {
      this.close()
      this.init()
      this.$emit('finish')
    },
    open () {
      this.init()
      this.show = true
    },
    close () {
      this.show = false
      this.init()
    },
    init () {
      this.step_current = 0
      this.validatorErrorNum = 0
      this.validatorSuccessNum = 0
      this.importErrorNum = 0
      this.importExistNum = 0
      this.importSuccessNum = 0
      this.validatorErrorStudent = 0
      this.validatorErrorTeacher = 0
      this.validatorErrorGroup = 0
      this.validatorErrorClassRoom = 0
      this.validatorErrorStudentGroup = 0
      this.job_id = ''
      this.$refs['one'].init()
    },
    startImport () {
      this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Icon', {
              'class': 'demo-spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 18
              }
            }),
            h('div', '正在努力导入数据中...')
          ])
        }
      })
      startImportJob({
        input: {
          job: this.job_id
        }
      }).then(res => {
        const { data } = res.data.start_import_job
        // 弹窗校验数据中
        this.importErrorNum = data.importErrorNum
        this.importExistNum = data.importExistNum
        this.importSuccessNum = data.importSuccessNum
        this.importErrorStudent = data.importErrorStudent
        this.importErrorTeacher = data.importErrorTeacher
        this.importErrorGroup = data.importErrorGroup
        this.importErrorClassRoom = data.importErrorClassRoom
        this.importErrorStudentGroup = data.importErrorStudentGroup
        this.step_current = 2
        this.$refs['step-three'].reload(this.job_id)
        this.$nextTick(() => this.$Spin.hide())
      }).catch(() => {
        this.$Spin.hide()
      })
    },
    uploadSuccess (name) {
      const school_id = this.school ? this.school._id : ''
      createImportJob({ input: {
        file_url: name,
        school_id
      } }).then((res) => {
        const { data } = res.data.create_import_job
        // 弹窗校验数据中
        this.job_id = data._id
        this.validatorSuccessNum = data.validatorSuccessNum
        this.validatorErrorNum = data.validatorErrorNum
        this.validatorErrorStudent = data.validatorErrorStudent
        this.validatorErrorTeacher = data.validatorErrorTeacher
        this.validatorErrorGroup = data.validatorErrorGroup
        this.validatorErrorClassRoom = data.validatorErrorClassRoom
        this.validatorErrorStudentGroup = data.validatorErrorStudentGroup
        this.$nextTick(() => {
          this.step_current = 1
          this.$refs['step-two'].reload(this.job_id)
          this.$Spin.hide()
        })
      }).catch(() => {
        this.$Spin.hide()
      })
    }
  }
}
</script>
<style>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>
